import { Metadata } from 'next'
import Image from 'next/image'
import Link from 'next/link'
import { news, getNewsById, getRelatedNews } from '@/data/news'
import NewsCard from '@/components/NewsCard'

type Props = {
  params: { id: string }
}

export function generateStaticParams() {
  return news.map((item) => ({
    id: item.id,
  }))
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const newsItem = getNewsById(params.id)

  if (!newsItem) {
    return {
      title: '新闻未找到 - 富强包装制品有限公司',
      description: '抱歉，您要查看的新闻不存在。',
    }
  }

  return {
    title: `${newsItem.title} - 富强包装制品有限公司`,
    description: newsItem.description,
  }
}

export default function NewsDetail({ params }: Props) {
  const newsItem = getNewsById(params.id)

  if (!newsItem) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-2xl font-bold text-gray-900 mb-4">新闻未找到</h1>
          <p className="text-gray-600 mb-4">抱歉，您要查看的新闻不存在。</p>
          <Link href="/news" className="text-primary hover:text-primary-dark">
            返回新闻列表
          </Link>
        </div>
      </div>
    )
  }

  const relatedNews = newsItem.relatedNews
    ? getRelatedNews(newsItem.relatedNews)
    : []

  return (
    <div className="min-h-screen py-16">
      <div className="container mx-auto px-4">
        <div className="max-w-4xl mx-auto">
          {/* 面包屑导航 */}
          <nav className="flex items-center gap-2 text-sm text-gray-500 mb-8">
            <Link href="/news" className="hover:text-primary">
              新闻中心
            </Link>
            <span>/</span>
            <span>{newsItem.title}</span>
          </nav>

          {/* 新闻标题 */}
          <h1 className="text-3xl font-bold text-gray-900 mb-4">
            {newsItem.title}
          </h1>

          {/* 新闻信息 */}
          <div className="flex items-center gap-4 text-sm text-gray-500 mb-8">
            <time dateTime={newsItem.publishDate}>
              {new Date(newsItem.publishDate).toLocaleDateString('zh-CN')}
            </time>
            <span>{newsItem.author}</span>
          </div>

          {/* 封面图 */}
          <div className="relative aspect-video mb-8 rounded-lg overflow-hidden">
            <Image
              src={newsItem.coverImage.url}
              alt={newsItem.coverImage.alt}
              fill
              className="object-cover"
            />
          </div>

          {/* 新闻内容 */}
          <div className="prose prose-lg max-w-none mb-12">
            {newsItem.content.split('\n\n').map((paragraph, index) => (
              <p key={index}>{paragraph}</p>
            ))}
          </div>

          {/* 标签 */}
          <div className="flex flex-wrap gap-2 mb-12">
            {newsItem.tags.map((tag) => (
              <span
                key={tag}
                className="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm"
              >
                {tag}
              </span>
            ))}
          </div>

          {/* 相关新闻 */}
          {relatedNews.length > 0 && (
            <div>
              <h2 className="text-2xl font-bold text-gray-900 mb-6">相关新闻</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                {relatedNews.map((item) => (
                  <NewsCard key={item.id} news={item} />
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
